<template>
	<view class="content">
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" style="background: #FFE226;color:#000 ;" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- <button type="primary" @tap="shareFc()">生成海报</button> -->
		<!-- 显示用的海报 -->
		
		<view class="wrapper">
			<view style="height:40px;visibility: hidden;"></view>
			<view class="logo">
				<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousDetailHeader.png" mode="widthFix"></image>
			</view>

			<view class="wrapper-content">
				<view class="content">{{content}}</view>
<!--				<view class="wrapper-header"><image src="../../../static/img/shareIcon.png" mode="widthFix"></image></view>-->
				
				
				<view class="wrapper-bottom">
					<view class="divide"></view>
					<view class="wrapper-bottom-left">
						<view class="from">扫码进入哔哔机</view>
						<view>这是一个年轻人瞎哔哔的圈子</view>
					</view>
					<view class="wrapper-bottom-right">
						<image :src="qrcode" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<button type="primary" size="mini" class="share" @click="shareFc">保存海报</button>
				<button type="primary" size="mini" open-type="share">分享给好友</button>
			</view>
		</view>
		<!-- 显示用的海报end -->
		
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/utils/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/utils/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				content:'阿斯顿发射点发射点啊手动阀士大夫大啊撒打发啊的撒发生阀手动发的案说法撒旦发啊打发打发打发啊打发订单啊',
				poster: {},
				topicId:'',
				circleDetail:{},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				qrcode:'',
				rpx:''
			}
		},
		onHide() {
			this.$bus.$data.topic='';
		},
		onUnload() {
			this.$bus.$data.topic='';
		},
		onLoad(options) {
			// uni.clearStorage();
			this.topicId = options.topicId;
			// this.getArticleList();
			this.rpx=uni.getSystemInfoSync().screenWidth/375
			this.content=this.$bus.$data.topic;
			this.getShareQrCode();
			
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			imageUrl:'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousPoster.png',
			path: `/pages/notice/anonymous/anonymousDetail/anonymousDetail?topicId=${this.topicId}`
		  }
		},
		methods: {
			async getShareQrCode(){
				let _this=this
				wx.downloadFile({
				  url: `${this.$api.BASE_URL}ucenter/getShareAnonymousMessageQRCode?user_token=${uni.getStorageSync('userToken')}&topic_id=${this.topicId}`,
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
				      _this.qrcode=res.tempFilePath;
				    }
				  }
				})
			},
			//获取圈子首页帖子列表+最新评论
			async getArticleList(){
			    let params = {
			        topicId: this.topicId,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.getCircleArticle(params);
			    if (res.data.level == 'success'){
			        this.circleDetail = res.data.data;
			        console.log(res)
			    }
			},
			async shareFc() {
				try {
					console.log('准备生成:' + new Date())
					// console.time('计算海报生成时间');
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 750*this.rpx,
							height: 1334*this.rpx,
							// backgroundColor: '#666'
						},
						// backgroundImage:'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousBg.png',
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {							
							// const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							let imageHeader={};//头图的信息
							const rpx=this.rpx;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'image',
										url: 'https://ciy.oss-cn-shenzhen.aliyuncs.com/web/bibiji/2020/1/15/anonymousBg.png',
										// alpha: .3,
										dx: 0,
										dy: 0,
										serialNum:0,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												dWidth: 750*this.rpx,
												dHeight: 1334*this.rpx,
											}
										}
									},
									//头图
									{
										type: 'image',
										url: 'https://ciy.oss-cn-shenzhen.aliyuncs.com/web/bibiji/2020/1/15/anonymousHeader.png',
										infoCallBack(imageInfo) {
											// let scale = bgObj.width * 0.2 / imageInfo.height;
											let dx=bgObj.width/2-imageInfo.width/2*bgScale;
											imageHeader={
												dx: dx,
												dy: 35,
												dWidth: imageInfo.width*bgScale,
												dHeight: imageInfo.height*bgScale,
											}
											return imageHeader
										},
									},
									//白色背景
									{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											// Context.setGlobalAlpha(0.3);
											let 
											x=imageHeader.dx,
											y=imageHeader.dy+imageHeader.dHeight+50,
											width=imageHeader.dWidth,
											height=bgObj.height-imageHeader.dHeight-100,radius=10;
											Context.beginPath();
											Context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
											Context.lineTo(width - radius + x, y);
											Context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
											Context.lineTo(width + x, height + y - radius);
											Context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
											Context.lineTo(radius + x, height +y);
											Context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
											Context.closePath();
											Context.setFillStyle('#fff')
											Context.fill()
											Context.setFillStyle('#F7F7F7')
											Context.fillRect(x+20, y+height-180, width-40, 20);
										},
										serialNum:-1000,
										id:'whiteBg'
									},
									//文章
									{
										type: 'text',
										// fontStyle: 'italic',
										text: this.content,
										size: 24,
										// color: 'white',
										// alpha: .5,
										lineFeed: {
										        maxWidth: bgObj.width*0.9,
										        lineHeight: 50,
										        lineNum: -1,
										        dx: -1
										    },
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											// _app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:bgObj.width/2,
												dy: bgObj.height-imageHeader.dHeight-100,
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									
									{
										type: 'text',
										// fontStyle: 'italic',
										text: '来自哔哔机',//长按识别小程序码匿名留言
										size: 24,
										// color: 'white',
										// alpha: .5,
										lineFeed: {
										        maxWidth: bgObj.width*0.9,
										        lineHeight: 50,
										        lineNum: -1,
										        dx: -1
										    },
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											// _app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:imageHeader.dx+20,
												dy: bgObj.height*0.9,
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									{
										type: 'text',
										// fontStyle: 'italic',
										text: '长按识别小程序码匿名留言',//
										size: 24,
										// color: 'white',
										// alpha: .5,
										lineFeed: {
										        maxWidth: bgObj.width*0.9,
										        lineHeight: 50,
										        lineNum: -1,
										        dx: -1
										    },
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											// _app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:imageHeader.dx+20,
												dy: bgObj.height*0.95,
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									
									
									//头像
									// {
									// 	type: 'image',
									// 	url: 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousHeader.png',
									// 	// alpha: .3,
									// 	dx:bgObj.width*0.05,
									// 	dy: bgObj.height*0.1,
									// 	infoCallBack(imageInfo) {
									// 		let scale = bgObj.width * 0.2 / imageInfo.height;
									// 		return {
									// 			circleSet: {
									// 				x: imageInfo.width * scale / 2,
									// 				y: bgObj.width * 0.2 / 2,
									// 				r: bgObj.width * 0.2 / 2
									// 			}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
									// 			dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
									// 			dHeight: bgObj.width * 0.2,
									// 			/* roundRectSet: { // 圆角矩形
									// 				r: imageInfo.width * .1
									// 			} */
									// 		}
									// 	}
									// },
									
									
									
									{
										type: 'image',
										url: this.qrcode,
										// alpha: .3,
										dx: bgObj.width * 0.8,
										dy: bgObj.height*0.9,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												dWidth: imageInfo.width * scale/1.8,
												dHeight: bgObj.width * 0.2/1.8,
											}
										}
									},
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.timeEnd('计算海报生成时间结果');
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.hideCanvasView {
		position: relative;
	}
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	.backgroundColor-white {
		background-color: white;
	}
	.border_radius_10px {
		border-radius: 10px;
	}
	.padding1vh {
		padding: 1vh;
	}
	.posterImage {
		width: 60vw;
	}
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	.marginTop2vh {
		margin-top: 2vh;
	}
	
	
	.wrapper{
		min-height: calc(100vh - 150rpx);
		width: 100%;
		background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousBg.png');
		background-size:100% 100%;
		padding-bottom: 150rpx;
		.wrapper-content{
			height: calc(100vw - 40rpx);
			position: relative;
			border-radius: 20rpx;
			background: #fff;
			margin:1rpx 20rpx 40rpx 20rpx;
			padding:60rpx 60rpx 150rpx 60rpx;
			box-sizing: border-box;
			@include flex(center);
			flex-direction: column;
			.content{
				font-size:40rpx;
				line-height: 56rpx;
				font-weight: 600;
			}
			.wrapper-header{
				@include flex(flex-start);
				position: absolute;
				top:60rpx;
				left:60rpx;
				width: 50rpx;
				height: 50rpx;
			}
			.wrapper-bottom{
				width: calc(100% - 80rpx);
				position: absolute;
				bottom: 20rpx;
				@include flexWrap(space-between);
				.divide{
					width:100%;
					height: 16rpx;
					background:rgba(247,247,247,1);
					margin-bottom: 30rpx;
				}
				image{
					width:100rpx;
					height: 100rpx;
				}
				.wrapper-bottom-left{
					color:rgba(139,141,147,1);
					font-size: 24rpx;
					.from{
						font-weight: 600;
						font-size:30rpx;
						margin:20rpx 0;
					}
				}
			}
		}
		.btn-wrapper{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 150rpx;
			background: rgb(87, 43, 236);
			box-shadow: 0rpx -2rpx 16rpx 10rpx rgb(96, 48, 255);
			@include flex(space-around);
			button{
				color: #000000;
				background-color: #ffffff;
				width:100px;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}
		}
		.logo{
			@include flex();
		}	
	}
</style>